<template>
  <div class="site-preview-card">
    <el-dialog v-model="dialogVisible" :show-close="false" :before-close="onClose" width="640px">
      <div class="info-con" v-if="siteTempPreviewItem">
        <p class="info">设置作品信息
          <i class="jy-icon-layer-closed btn-close" @click.stop="onClose"></i>
        </p>
        <el-button type="primary" @click.stop="Online">{{ siteTempPreviewItem.status == 1 ? "下 线" : "上 线"}}</el-button>
        <p class="date">最近编辑日期：{{siteTempPreviewItem.update_time}} </p>
        <p class="qr" @click="onQrcode"><img :src="siteTempPreviewItem.qrcode"></p>
        <p class="template">手机扫一扫预览</p>
        <a class="pageurl">{{siteTempPreviewItem.pageurl}}</a>
        <p class="link-con" @click.stop="clipboardCopy(siteTempPreviewItem.pageurl)">
          <span class="link"><i class="jy-icon-link"></i>复制链接</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import { copyUtils } from '@/views/js/copy-utils'

  export default {
    mixins: [copyUtils],
    components: {
      // SettingShareAll,
    },
    props: ['isVisible'],
    computed: {
      ...mapState({
        site_id: state => state.cardComponents.siteData.id,
        share: state => state.cardComponents.siteData.attrs ? _.cloneDeep(state.cardComponents.siteData.attrs.share) : null,
        siteTempPreviewItem: state => state.cardComponents.sitePreshowData,
        isTemplete: state => state.cardComponents.siteData.is_template == 1 ? true :  false,
      }),
      dialogVisible() {
        return this.isVisible && this.siteTempPreviewItem
      }
    },
    methods: {
      ...mapActions({
        updateMgSitePreview: 'cardComponents/updateMgSitePreview',
        // onlineSite: 'cardComponents/onlineSite',
        onlineSite: "user/onlineSite",
        getCardSitePreshow4Qrcode: 'cardComponents/getCardSitePreshow4Qrcode',
        recoverSiteQrcode: "cardComponents/recoverSiteQrcode",
      }),
      onQrcode(){
        let site_id = this.site_id
        this.recoverSiteQrcode({site_id})
      },
      async Online() {
        // 1. online 2-下线，1-上线
        let params = {
          online: this.siteTempPreviewItem.status == 1 ? 2 : 1,  // online 2-下线，1-上线
          site_id: this.site_id,
          isTempPreviewUrl: false
        };
        await this.onlineSite(params);

        // 2. 获取更新 sitePreshowData; 更新 shared_text_qrcode
        await this.getCardSitePreshow4Qrcode({
          id: this.site_id,
        })
      },
      onChange(){
      },
      onClose() {
        this.updateMgSitePreview({ isActive: false });
      },
    },
  };
</script>

<style lang="scss">
  .site-preview-card {
    position: absolute;
    z-index: 9999;

    .share-all-style {
      padding: 0;
    }
    .el-dialog {
      width: 640px;
      background: transparent;
      box-shadow: none !important;

      .el-dialog__header {
        display: none;
      }
    }
    .el-dialog__body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 0;
      height: inherit;

      .info-con {
        position: relative;
        width: 320px;
        height: inherit;
        background-color: #ffffff;
        padding: 20px;
        display: flex;
        flex-direction: column;
        // justify-content: center;

        .info {
          top: 12px;
          margin-bottom: 20px;
          text-align: left;
          font-size: 16px;
          color: #373438;
          .btn-close {
            position: absolute;
            top: 12px;
            right: 10px;
          }
        }
        .el-button {
          padding: 10px 20px;
          border-radius: 0;
          margin: 10px 0;
          margin-top: 20px;
          width: 100%;
        }
        .qr{
          text-align: center;
          margin-top:40px;
          img{
            width: 120px;
            height: 120px;
          }
        }
        .date{
          color: #A5AFBE;
          text-align: left;
          font-size: 12px;

        }
        .link-con{
          text-align: center;
          margin-top: 20px;
          margin-bottom: 20px;
        }
        .link{
          border: 1px solid #F3F5FA;
          width: 126px;
          padding: 4px 20px;
          color:#43475C;
          display: inline-block;
          cursor: pointer;
        }
        .template{
          color: #43475C;
          text-align: center;
          font-size: 12px;
          margin-top: 10px;
          margin-bottom: 20px;
        }
      }
    }
  }
</style>
